<template>
	<view class="content">
		<view class="row b-b">
		    <image src="../../static/sji.png"><input class="input" type="number" v-model="phone" placeholder="请输入手机号" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<image src="../../static/yanzhengma.png"><input class="input" type="number" v-model="vcode" maxlength="8" placeholder="请输入手机验证码" placeholder-class="placeholder" />
			<view class="verify-code-selection">
				<text class="btn-get-code" @click="getCode">{{textcode}}</text>
			</view>
		</view>
		<view class="row b-b" style="margin-top: 20upx;">
			<image src="../../static/mima2.png"><input type="text" v-model="pwd" class="input" password placeholder-class="placeholder" placeholder="新密码"/>
		</view>
		<view class="row b-b">
			<image src="../../static/mima2.png"><input type="text" v-model="newpwd" class="input" password placeholder-class="placeholder" placeholder="确认密码"/>
		</view>
		<view class="row b-b" v-show="ft == 1">
			<image src="../../static/sji.png"><input type="text" v-model="t_mobile" class="input"  placeholder-class="placeholder" placeholder="邀请人手机号"/>
		</view>
		<button class="add-btn" @click="confirm">{{buttext}}</button>
	</view>
</template>

<script>
	import { mapActions } from 'vuex'
	
	export default {
		data() {
			return {
					phone: '',//电话
					t_mobile: '',//推荐人电话
					vcode : '',// 验证码
					pwd: '',
					newpwd: '',	
					ft: 1, // 1 注册  2 忘记密码
					buttext: '',
					verShow: true,
					textcode: '获取验证码'
			}
		},
		onLoad(option){
				let title = '注册'
				if(option.types == 1){
					this.buttext = '注册';
				}else if(option.types == 2){
					this.ft = 2;
					this.buttext = '提交';
					title = '忘记密码';
				}
				uni.setNavigationBarTitle({
					title: title
				})
		},
		methods: {
			//验证码
			getCode(){
				uni.request({
					url: this.$common.baseUrl + "/api/user/sendSMS",
					dataType: 'json', //默认 json格式
					data: {
						mobile:this.phone
					},
					method: 'POST', //请求方式
					header: {
						'content-type': 'application/x-www-form-urlencoded', //默认值
					},
					success: (res) => {
						
					},
					fail: (error) => {
						
					}
				})
				if(this.verShow){
					if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.phone)){
						this.$api.msg('请输入正确的手机号码');
						return;
					}
					  this.verShow = false; 
					  this.textcode = 60;
		              var auth_timer = setInterval(()=>{
		                this.textcode--;
		                if(this.textcode<=0){
		                  this.verShow = true;
						  this.textcode = '获取验证码';
		                  clearInterval(auth_timer);
		                }
		              },1000)	
				}
			},
			//提交
			confirm(){
				if(!this.phone){
					this.$api.msg('请填写手机号');
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.phone)){
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				if(!this.vcode){
					this.$api.msg('请输入验证码');
					return;
				}
				if(!this.pwd){
					this.$api.msg('请填密码');
					return;
				}
				if(!this.newpwd){
					this.$api.msg('请再次输入密码');
					return;
				}
				if(this.pwd != this.newpwd){
					this.$api.msg('两次密码不一致');
					return;
				}
				if(this.ft == 1 && this.t_mobile != ''){
					if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.t_mobile)){
						this.$api.msg('请输入正确的推荐人手机号码');
						return;
					}
				}
				let url = '',
				    datas = '';
				if(this.ft == 1){
					url = this.$common.baseUrl + '/api/user/register';
					datas = {
						username : this.phone,
						code:this.vcode,
						password:this.pwd,
						repassword:this.newpwd,
						t_mobile : this.t_mobile
					}
				}else if(this.ft == 2){
					url = this.$common.baseUrl + '/api/user/forgetpass';
					datas = {
						mobile:this.phone,
						code:this.vcode,
						password:this.pwd,
						repassword:this.newpwd
					}
				}
				// uni.navigateBack({
				// 	delta: 1
				// })
				uni.request({
					url: url,
					dataType: 'json', //默认 json格式
					data: datas,
					method: 'POST', //请求方式
					header: {
						'content-type': 'application/x-www-form-urlencoded', //默认值
					},
					success: (res) => {
						this.$api.msg(res.data.msg);
						if(res.data.code == 1){
							uni.navigateBack({
								delta: 1
							})
						}
					},
					fail: (error) => {
						
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.row{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;
		line-height: 110upx;
		.tit{
			flex-shrink: 0;
			width: 120upx;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
			margin-left: 25upx;
			margin-top: 6upx;
		}
		image{
			height: 50upx;
			width: 40upx;
			
		}
	}
	// .default-row{
	// 	margin-top: 16upx;
	// 	.tit{
	// 		flex: 1;
	// 	}
	// 	switch{
	// 		transform: translateX(16upx) scale(.9);
	// 	}
	// }
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-index-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	.btn-get-code {
		display: flex;
		align-items: center;
		font-size: $font-base - 6upx;
		letter-spacing: 4upx;
		border: 2upx solid #FF4500;
		height: 60upx;
		background: $base-index-color;
		color: #fff;
		border-radius: 10upx;
		padding: 4upx 20upx;
	}
</style>
